<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <!-- head 中 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/public/static/css/layer.css" >
    <title>乐8预约</title>
</head>
<body style="padding:10px;">
<div class="weui-cells weui-cells_form" style="margin-top:-5px;">

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">预约日期</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" name="reserve_date" value="{:input('get.reserve_date')}" readonly="readonly" placeholder="">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">预约场次</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" name="reserve_field" value="{:config('rfield')[input('get.field')]}" readonly="readonly"  placeholder="">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">联系人</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" name="name" value="{$data[name]}" type="text"  placeholder="请输入联系人">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" name="mobile" value="{$data[mobile]}" type="tel" pattern="[0-9]*" placeholder="请输入手机号码">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">会员卡号</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" name="membercard" value="{$data[membercard]}"  type="number" pattern="[0-9]*" placeholder="请输入会员卡号">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">大人人数</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" name="adult" value="{$data[adult]}"  type="number" pattern="[0-9]*" placeholder="请输入大人人数">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">小孩人数</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" name="kid" value="{$data[kid]}" type="number" pattern="[0-9]*" placeholder="请输入小孩人数">
        </div>
    </div>
</div>

    <button id="subt" class="weui-btn weui-btn_primary" style="margin-top:30px;" onclick="subInfo()">提交</button>


</div>

</body>
<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="/public/static/js/layer.js"></script>
<script>
    // 表单POST提交
    function submit(obj) {
        $.ajax({
            url: '{:url(MODULE_NAME.\'/index\')}',
            type: 'post',
            data: obj,
            success: function (res) {
                console.log(res);
                var data = JSON.parse(res);
                if(data.info.status === 'OK'){
                    //预约成功 禁用提交按钮
                    $("#subt").attr({"disabled":"disabled"});
                    layer.open({
                        content: '预约成功',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });

                    setTimeout(function () {
                        window.location.href="{:url(MODULE_NAME.\'/info\')}?id="+data.info.id;
                    }, 2000);
                    //window.location.reload();


                }else{
                    layer.open({
                        content: data.info,
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                }
            },
            error: function(e) {
                console.log(e)

            }
        })
    }



    function subInfo(){
        var field = "{:input('get.field')}";
        var reserve_date = $("input[name='reserve_date']").val()
        var reserve_field = field;
        var name = $("input[name='name']").val()
        var mobile = $("input[name='mobile']").val()
        var membercard = $("input[name='membercard']").val()
        var adult = $("input[name='adult']").val()
        var kid = $("input[name='kid']").val()
        var obj = {
            reserve_date: reserve_date && reserve_date.trim(),
            reserve_field: reserve_field && reserve_field.trim(),
            membercard: membercard && membercard.trim(),
            name: name && name.trim(),
            mobile: mobile && mobile.trim(),
            adult: adult && adult.trim(),
            kid: kid && kid.trim(),
        }
        var verif = verification(obj);
        if(!verif){
            return;
        }
        submit(obj);
    }


    /**
     * 验证表单数据
     * @param {表单数据对象} obj
     */
    function verification(obj) {
        if(!obj.reserve_date) {
            layer.open({
                content: '请选择日期',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        if(!obj.reserve_field) {
            layer.open({
                content: '请输入场地',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        if(!obj.name) {
            layer.open({
                content: '请输入联系人',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        if(!obj.mobile) {
            layer.open({
                content: '请输入电话',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        if(!obj.membercard) {
            layer.open({
                content: '请输入卡号',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        return true;
    }
</script>

</html>
